<template>
    <div class='content'>
        <section class="personInfo">
            <div class="profile_page">
                <head-top :go-back='goBack' :head-title="profiletitle"></head-top>
            </div>
            <div>
                <div v-for="(formData,i) in examData" :key="formData.planTableItemId" style="height: 100%">
                    <div v-show="i== tabActive" class='content' style="padding-top: 0">
                        <div class="formContain">
                           <!-- <titlebar1 :titleLeft='formData.itemClassName'></titlebar1>-->
                            <div class="subject">
                                <div class="subTitle">({{(i+1) +'/'+ totalIndex}})《{{formData.itemName}}》</div>
                                <p class="subContent">
                                    {{formData.itemDesc}}
                                </p>
                            </div>
                            <div class="scores">
                                <div class="scoreHead">
                                    <p class="scoreName">被测评人姓名</p>
                                    <p class="score">评分</p>
                                </div>
                            </div>
                            <div class="scores" style="margin-top: 0">
                               <!-- <titlebar :titleLeft='titleLeft'></titlebar>-->
                                <div class="scoreHead" v-for="(item,inD) in personData" :key="item.TARGET_PER_ID" style="background: #fff">
                                    <p class="scoreName">{{item.PER_NAME}}</p>
                                    <p class="score">
                                        <van-field type="digit" v-model="item[formData.infoItemId]" @input="rateCalculate(formData.infoItemId,inD)"/>
                                        <span>分</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="align_center foot-button">
                            <van-button class="primary-btn" type="primary" v-if="i!=0" @click="prevStep((i-1))">上一题
                            </van-button>
                            <van-button class="primary-btn" type="primary" v-if="i!=(totalIndex-1)"
                                        @click="nextStep((i+1),formData.infoItemId)">下一题
                            </van-button>
                            <van-button class="primary-btn" type="primary" v-if="i==(totalIndex-1)" @click="saveData(formData.infoItemId)">
                                提交
                            </van-button>
                        </div>
                    </div>
                </div>

            </div>

        </section>
    </div>
</template>

<script>
	import headTop from '@/components/header/head'
	import titlebar from '@/components/titlebar3/titlebar3';
	import titlebar1 from '@/components/titlebar2/titlebar2';
	import {getSrlPlanTable,submitSrlGrade} from '@/service/getData';
	import {setStore, getStore, getDefault} from '@/assets/config/mUtils';
	import {Dialog, Toast} from 'vant';

	let that;
	export default {
		data() {
			return {
				profiletitle: '胜任力考评计划',
				goBack: true,
				tabActive: 0,
				titleLeft: '',
				titleLeft1: '',
				totalIndex: 0,
				res: true,
				infoData: '',
				examData: [],
				usreAvator: 'https://ciicfchrsaas.ciicfc.com/wechat/main/perphoto.png',
				hro: true,
				personData: [],
				planRateList: [],
				planLevelSegmentList: [],
			}
		},
		created() {
			var data = getDefault();
			data.evaType = this.$route.params.evaType;
			data.orgId = this.$route.params.orgId;
			data.dimensionId = this.$route.params.dimensionId;
			data.planId = this.$store.state.planId;
			data.examinerId = getStore('user_id');
			getSrlPlanTable(data).then(res=>{
				console.log(res);
				var data = res.data;
				this.examData = data.planTableItemList;
				this.totalIndex = data.planTableItemList.length;
				this.personData = data.planTargetList;
			});
		},
		mounted() {

		},
		updated() {

		},
		components: {
			headTop,
			titlebar,
			titlebar1,
		},
		methods: {
			maxNum(val){
				if(val>100){
					return 100;
                }
            },
			rateCalculate(num,resetIndex){
				if(this.personData[resetIndex][num]>100){
					this.personData[resetIndex][num] = 100;
                }else {
					this.personData[resetIndex][num] = Number(this.personData[resetIndex][num]) ;
                };

            },
			nextStep(index, type) {
				var rateLists = [];
				for(var i=0;i<this.personData.length;i++){
					rateLists.push(this.personData[i][type])
				};
				for(var j=0;j<rateLists.length;j++){
					if(rateLists[j] == 0){
						Toast({
							message: '人员必须全部评分!',
							duration: '1000',
						});
						return;
					}
				};
				this.tabActive = index;
			},
			prevStep(index) {
				this.tabActive = index;
			},
			saveData(type) {
				var rateLists = [];
				for(var i=0;i<this.personData.length;i++){
					rateLists.push(this.personData[i][type])
				};
				for(var j=0;j<rateLists.length;j++){
					if(Number(rateLists[j]) == 0){
						Toast({
							message: '人员必须全部评分!',
							duration: '1000',
						});
						return;
					}
				};

				var sum = [],sum1 = [],sum2=[],sum3=[],sum4=[],sum5=[];
				for(var m=0;m<this.examData.length;m++){
					var carTotal = this.examData[m];
					var abilityDimension = carTotal.abilityDimension;
					var infoItemId = carTotal.infoItemId;
					if(abilityDimension == '3666000001'){
						sum.push(infoItemId)
					}else if(abilityDimension == '3666000002'){
						sum1.push(infoItemId)
					}else if(abilityDimension == '3666000003'){
						sum2.push(infoItemId)
					}else if(abilityDimension == '3666000004'){
						sum3.push(infoItemId)
					}else if(abilityDimension == '3666000005'){
						sum4.push(infoItemId)
					}else if(abilityDimension == '3666000006'){
						sum5.push(infoItemId)
					}
                };
				for(var i=0;i<this.personData.length;i++){
					var curData = this.personData[i];
					var sums = 0;
					for(var m=0;m<sum.length;m++){
						var carTotal = sum[m];
						var total = sum.length;
						sums+=Number(curData[carTotal]);
					};
					var gradeTotal = (sums/total);
					curData['EXAMINER_TOTAL_MANAGEMENT_ABILITY'] = gradeTotal;
				};
				for(var i=0;i<this.personData.length;i++){
					var curData = this.personData[i];
					var sums = 0;
					for(var m=0;m<sum1.length;m++){
						var carTotal = sum1[m];
						var total = sum1.length;
						sums+=Number(curData[carTotal]);
					};
					var gradeTotal = (sums/total);
					curData['EXAMINER_TOTAL_PRESSURE_ABILITY'] = gradeTotal;
				};
				for(var i=0;i<this.personData.length;i++){
					var curData = this.personData[i];
					var sums = 0;
					for(var m=0;m<sum2.length;m++){
						var carTotal = sum2[m];
						var total = sum2.length;
						sums+=Number(curData[carTotal]);
					};
					var gradeTotal = (sums/total);
					curData['EXAMINER_TOTAL_EXECUTION_ABILITY'] = gradeTotal;
				};
				for(var i=0;i<this.personData.length;i++){
					var curData = this.personData[i];
					var sums = 0;
					for(var m=0;m<sum3.length;m++){
						var carTotal = sum3[m];
						var total = sum3.length;
						sums+=Number(curData[carTotal]);
					};
					var gradeTotal = (sums/total);
					curData['EXAMINER_TOTAL_EDUCATIONAL_ABILITY'] = gradeTotal;
				};
				for(var i=0;i<this.personData.length;i++){
					var curData = this.personData[i];
					var sums = 0;
					for(var m=0;m<sum4.length;m++){
						var carTotal = sum4[m];
						var total = sum4.length;
						sums+=Number(curData[carTotal]);
					};
					var gradeTotal = (sums/total);
					curData['EXAMINER_TOTAL_SOCIAL_ABILITY'] = gradeTotal;
				};
				for(var i=0;i<this.personData.length;i++){
					var curData = this.personData[i];
					var sums = 0;
					for(var m=0;m<sum5.length;m++){
						var carTotal = sum5[m];
						var total = sum4.length;
						sums+=Number(curData[carTotal]);
					};
					var gradeTotal = (sums/total);
					curData['EXAMINER_TOTAL_TECHNICAL_ABILITY'] = gradeTotal;
				};
				Toast.loading({
					duration: 0,   // 持续展示 toast
					mask: true,
					message: '正在提交...'
				});
				console.log(this.personData);
                var data = {};
				data.executeList = this.personData;
				submitSrlGrade(data).then(res=>{
					Toast.clear();
					this.$router.go(-1);
                })
			}
		}
	}

</script>

<style lang="scss" scoped>
    @import '../../../assets/style/mixin';
    @import '../../../assets/style/public';

    .infoList {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.48rem 0.6rem .48rem 0.4rem;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        background: #fff;
        img {
            width: 1.66rem;
            height: 1.66rem;
            border-radius: 50%;
        }
        p {
            color: #333;
            font-size: .6rem;
        }
    }

    .formContain {
        padding-bottom: 2.4rem;
        ul {
            padding: 0 .24rem;
            .flex {
                justify-content: space-between;
                align-items: center;
                line-height: 2rem;
                border-bottom: 1px solid #e0e0e0;
                padding: 0 .3rem;
                &:nth-last-of-type(1) {
                    border: none;
                }
                .label {
                    font-size: .56rem;
                    line-height: 2rem;
                    color: #333333;
                }
                div {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    position: relative;
                    flex-grow: 1;
                    img {
                        width: .68rem;
                        height: .64rem;
                    }
                    input {
                        color: #323233;
                        text-align: right;
                        font-size: .48rem;
                        padding-right: .48rem;
                        border: none;
                        &:-ms-input-placeholder {
                            color: #aaa;
                            font-size: .48rem;

                        }
                    }
                    .file {
                        width: 2rem;
                        height: 1rem;
                        font-size: 10rem;
                        opacity: 0;
                        position: absolute;
                        right: 0;
                    }
                    .van-cell {
                        font-size: .48rem;
                        padding-right: .48rem;
                        padding: 0;
                        color: #aaa;
                        .van-field__control {
                            color: #aaa;
                        }
                    }

                }
            }
        }
    }

    .addItems {
        display: flex;
        justify-content: center;
        margin: .4rem;
        background-color: #fff;
        padding: 0.6rem 0;
        color: #1f9eff;
        font-size: 0.6rem;
        border: 1px dashed #eee;

    }

    .btn {
        background-color: #fff;
        border: 1px solid #ccc;
        color: #666;
    }

    .primary-btn {
        margin: 0.4rem;
        border-radius: 1rem;
    }

    .entryTips {
        display: flex;
        flex-direction: column;
        margin: 0.4rem;
        align-content: center;
        font-size: 0.56rem;
    }

    .foot-button {
        position: fixed;
        width: 100%;
        bottom: 0rem;
    }

    .subject {
        margin: 0.3rem 0.5rem 0;
        background: #fff;
        border-radius: 0.2rem;
        padding: 0.4rem 0.4rem;
        .subTitle {
            font-size: 0.9rem;
            color: #333;
        }
        .subContent {
            margin-top: 0.4rem;
            font-size: 0.48rem;
            color: #666;
            line-height: 0.8rem;
        }
    }

    .scores {
        margin-top: 0.6rem;
        .scoreHead {
            background: #f1f1f1;
            height: 1.8rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            .scoreName {
                width: 40%;
                border-right: 1px solid #e4e4e4;
                text-align: center;
                font-size: 0.6rem;
                height: 100%;
                line-height: 1.8rem;
            }
            .score {
                width: 60%;
                text-align: center;
                font-size: 0.6rem;
                height: 100%;
                line-height: 1.8rem;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                .van-field {
                    width: 3rem;
                    height: 1.2rem;
                    line-height: 1.2rem;
                    border-radius: 0.4rem;
                    border: 1px solid #e0e0e0;
                    padding: 0;
                    margin-right: 0.6rem;
                    /deep/ .van-field__control {
                        text-align: center;
                    }
                }
            }
        }
    }

    .scoreHead1 {
        background: #fff;
    }
</style>
